<template>
  <div class="">
    <div class="map" id="coordinates" ref="basicMapbox"></div>
    <div>{{ markInfo }}</div>
    <el-button type="primary" @click="addMark">打点</el-button>
    <el-button type="primary" @click="addLine">管线</el-button>
    <el-button type="primary" @click="addLayer">添加图层</el-button>
    <el-button type="primary" @click="clearMark">清空点位</el-button>
    <el-button type="primary" @click="clearLine">清空管线</el-button>
    <el-button type="primary" @click="clearLayer">清空图层</el-button>
    <el-button type="primary" @click="filterLayers">显示地图九段线</el-button>
  </div>
</template>

<script>
// 引入地图
import map from './js/map'

// 引入自定义管线geoJson数据
import pipeline from './js/pipeline'
// 引入自定义图层geoJson数据
import layer from './js/layer'
export default {
  name: 'MyMapbox',
  components: {},
  props: {},
  data() {
    return {
      markInfo: null,
      pointData: [
        {
          gpsX: 99.312988,
          gpsY: 27.168013,
          alarmEventName: '测试1',
          address: '测试1',
          id: '1',
        },
        {
          gpsX: 99.29743,
          gpsY: 27.191124,
          alarmEventName: '测试2',
          address: '测试2',
          id: '2',
        },
      ],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    //将标记点位事件挂载到window上
    window.onMarkJump = this.onMarkJump

    map.initMap()

  },
  methods: {
    // 获取标记点信息
    onMarkJump(val) {
      this.markInfo = val
    },
    // 添加点位
    addMark() {
      map.addMark(this.pointData)
    },
    // 清除点位
    clearMark() {
      map.clear(this.pointData)
    },
    // 添加管线
    addLine() {
      map.darwLine(pipeline)
    },
    // 清除管线
    clearLine() {
      map.clear('route')
    },
    // 添加图层
    addLayer() {
      map.darwFill(layer)
    },
    // 清除图层
    clearLayer() {
      // 要清空图层的id数组
      const ids = [
        // 图层内容
        {
          id: '9Fill',
          dma_name: '测试一',
        },
        {
          id: '10Fill',
          dma_name: '测试二',
        },
        // 图层的边
        {
          id: '9Line',
          dma_name: '测试一',
        },
        {
          id: '10Line',
          dma_name: '测试二',
        },
      ]
      map.clear(ids)
    },
    // 增加地图九段线
    filterLayers(){
      map.filterLayers()
    }
  },
}
</script>

<style scoped lang="less">
@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css');
#coordinates {
  width: 100%;
  height: 80vh;
}
/deep/ .mapboxgl-control-container {
  display: none !important;
}
</style>
